<template>
    <div>
        <TopBar :title="title"></TopBar>
        <div class="tapp">
            <mt-navbar v-model="selected">
                <mt-tab-item id="1">正在热映</mt-tab-item>
                <mt-tab-item id="2">即将上映</mt-tab-item>
            </mt-navbar>
            <!-- tab-container -->
            <mt-tab-container v-model="selected">
                <mt-tab-container-item id="1">
                    <ul>
                        <li v-for="item in filmList">
                            <router-link :to="{name: 'detail', params: {'id': item.id}}">
                                <div class="imgbox">
                                    <img :src="item.poster.thumbnail" alt=""/>
                                </div>
                                <div class='info'>
                                    <p class="fm">
                                        <span class="filmname">{{item.name}}</span>
                                        <span class="scroe">{{item.grade}}<span class="gt">&gt;</span></span>
                                    </p>
                                    <p class="desc">{{item.intro}}</p>
                                    <p class="film-counts">
                                        <span>{{item.cinemaCount}}家影院上映</span>
                                        <span class="buy">{{item.watchCount}}人购票</span>
                                    </p>
                                </div>
                            </router-link>
                        </li>
				    </ul>
                </mt-tab-container-item>
                <mt-tab-container-item id="2">
                    <ul>
                        <li v-for="item in filmList1">
                            <router-link :to="{name: 'detail', params: {'id': item.id}}">
                                <div class="imgbox">
                                    <img :src="item.poster.thumbnail" alt=""/>
                                </div>
                                <div class='info'>
                                    <p class="fm">
                                        <span class="filmname">{{item.name}}</span>
                                        <span class="scroe">{{item.grade}}<span class="gt">&gt;</span></span>
                                    </p>
                                    <p class="desc">{{item.intro}}</p>
                                    <p class="film-counts">
                                        <span>{{item.cinemaCount}}家影院上映</span>
                                        <span class="buy">{{item.watchCount}}人购票</span>
                                    </p>
                                </div>
                            </router-link>
                        </li>
				    </ul>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
  </div>
</template>
<script>
import $ from "jquery"
import TopBar from './TopBar.vue'
import { Navbar, TabItem } from 'mint-ui';
export default {
    data:function () {
        return{
            title:"卖座电影",
            filmList:[],
            selected:"1",
			//selected是navbar的属性需要添加加载完成默认选中的id
			filmList1:[]
        }
    },
    components: {
            TopBar,
            Navbar,
            TabItem 
        },
	filters:{
			'formateDate':function (t) {
				var time = new Date(t);
				var m = time.getMonth()+1;
				var d = time.getDate();
				return m + '月' + d + '日上映';
			}
		},
    mounted:function(){
        var that = this;
			var page = this.$route.params.page;
			//console.log(page)
			var listUrl = 'http://localhost:3000/movie?page='+page;
			//console.log(listUrl)
			$.get(listUrl,function(res) {
				//console.log(res)
				that.filmList = res.data.films;
			});
			//再写一个请求
			var p = 1;
			var t = new Date().getTime();
			var willUrl = 'http://localhost:3000/will?time='+t+'&page='+p+'&count=7';
			$.get(willUrl,function(resp) {
				//console.log(resp)
				that.filmList1 = resp.data.films;
			});

		}
}
</script>
<style>

    .tapp{
        padding:.5rem .15rem 0 .15rem;
        background: #fff
    }
    .mint-tab-item-label{
        font-size: .16rem!important
    }
    .mint-navbar .mint-tab-item.is-selected{
        border-bottom: 3px solid #fe6e00!important;
        color: #fe6e00!important;
        margin-bottom: 0!important
    }
    .mint-tab-container-item ul li a{
        width: 100%;
	    padding: 20px 0;
	    border-bottom: dashed 1px #c9c9c9;
	    cursor: pointer;
        display: flex
    }

     .imgbox{
		width: 60px;
		float:left;
		overflow:hidden;
	    
	}
	 .imgbox img{
		width:100%;
		vertical-align: middle;
	}
	 .info{
		padding-left: 15px;
	    display: inline-block;
	    width: 75%;
	}
	 .fm{
		font-size: 16px;
	    line-height: 32px;
	    color: #000;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	 .filmname{
		float: left;
    	width: 85%;
    	overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.desc{
		height: 24px;
	    line-height: 24px;
	    color: #8e8e8e;
	    font-size: 12px;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    width: 100%;
	    display: inline-block;
	}
	.film-counts{
		line-height: 24px;
	    color: #8e8e8e;
	    font-size: 12px;
	}
	.scroe{
		float: right;
	    font-size: 16px;
	    line-height: 32px;
	    color: #fc7103;
	}
	.gt{
		font-family: monospace;
    	color: #c6c6c6;
	}
	.buy{
		position:absolute;
		right:10%;
	}
</style>
